﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>JQuery测试</title>
	<style>
		hr {
			height:1px;
			border:0;
			border-top: 1px solid #00bcd4;
		}
		.note{
			font-size: 11px;
			font-weight:normal;
		}
		pre {
			font-size: 14px;
		}
		
		#panel,#flip
		{
			padding:5px;
			text-align:center;
			background-color:#e5eecc;
			border:solid 1px #c3c3c3;
		}
		#panel
		{
			padding:50px;
			display:none;
		}
	</style>
	<script src="../libs/jquery.min.js"></script>
    <script>
		$(document).ready(function(){
			$('#show').click(function(){
				$('#mycontent').show();
			});
			$('#hide').click(function(){
				$('#mycontent').hide();
			});
			
			$('#fadeToggle').click(function(){
				$('#fadeContent1').fadeToggle();
				$('#fadeContent2').fadeToggle('slow');
				$('#fadeContent3').fadeToggle(3000);
			});
			
			$('#fadeOut').click(function(){
				$('#fadeContent1').fadeOut();
			});
			
			$('#fadeIn').click(function(){
				$('#fadeContent1').fadeIn();
			});
			
			$('#flip').click(function(){
				$('#panel').slideToggle();
			});
			
			$("#animate").click(function(){
				var div=$("#animate_div");  
				div.animate({left:'100px'},"slow");
				div.animate({fontSize:'3em'},"slow");
			});
		});
    </script>
</head>
<body>
	<hr>
	<h2>显示和隐藏 <span class='note'>2017.9.24</span></h2>
	<pre>
    .show()让隐藏的元素显示。效果为：同时修改元素的高度、宽度、opacity属性
    .hide()让显示的元素隐藏，与show相反
    .toggle() 方法用来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素
	</pre>
	<button id="hide">隐藏</button>
	<button id="show">显示</button>
	<label id="mycontent">这里是显示和隐藏内容</label>
	<hr>
	
	<h2>淡入淡出 <span class='note'>2017.9.24</span></h2>
	<pre>
    .fadeIn() 让隐藏的元素淡入显示
    .fadeOut() 让显示的元素淡出隐藏，修改透明度
    .fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
    .fadeTo(时间,最终透明度,函数)同fadeToggle，接受第二个参数，表示达到最终透明度
	</pre>
	<button id="fadeToggle">淡入/淡出</button>
	<button id="fadeIn">淡入</button>
	<button id="fadeOut">淡出</button>
	<br>
	<div id="fadeContent1" style="width:80px;height:80px;background-color:red;"></div>
	<div id="fadeContent2" style="width:80px;height:80px;background-color:green;"></div>
	<div id="fadeContent3" style="width:80px;height:80px;background-color:blue;"></div>
	<hr>
	
	<h2>滑动 <span class='note'>2017.9.24</span></h2>
	<pre>
    .slideDown() 让隐藏的元素显示，效果为从上往下，增加高度；
    .slideUp() 让显示的元素隐藏，效果为从下往上，减小高度；
    .slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。
	</pre>
	<div id="flip">点我，显示或隐藏面板。</div>
	<div id="panel">Hello world!</div>
	<hr>
	
	<h2>动画 animate <span class='note'>2017.9.24</span></h2>
	<pre>
.animate({最终样式属性，键值对对象},
    动画事件,
    动画效果("linear","swing"),
    动画执行完后的回调函数)
    自定义动画注意事项：
    参数一的对象中，键必须使用驼峰法则
    只有数值类型的属性能够使用动画，非数值类型的属性不能使用动画	</pre>
	<button id="animate">开始动画</button>
	<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
	如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
	<div id='animate_div' style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
	<hr>
	
</body>
</html>